Bahagian klien Peta imej

Peta imej bahagian klien diperkenalkan dalam HTML 3.2, dan tidak memerlukan sebarang logik dilakukan pelayan. Peta imej sebegini juga tidak memerlukan JavaScript.

HTML tulen

Peta imej klien HTML memiliki dua bahagian:

  1. imej sebenar yang dibenam dengan teg <img>. Teg imej itu mesti memiliki atribut usemap, yang menamakan peta imej bagi kegunaan lanjut.
  2. Unsur <map>, dan didalamnya, unsur <area>, dengan setiap satu menetapkan satu kawasan boleh diklik dalam peta imej. Ini adalah sama dengan teg <a> yang menetapkan URL dalam tulisan. Satu atribut title boleh diberi. Bagi tujuan ketercapaian web, biasanye penting – dan kadangkala, sebagai kewajiban perundangan – untuk memberikan atribut alt yang menghuraikan pautan yang boleh dibaca perisian pembaca skrin, sebagai contoh, kepada orang buta.[3]

Unsur <area> boleh berbentuk segi empat (shape="rect"), poligon (shape="poly") atau bulatan (shape="circle").Nilai yang digunakan merupakan pasangan koordinat. Setiap pasang memiliki nilai X dan Y (dari bucu atas kiri imej) dan dipisahkan dengan koma.

  • Segi empat: Empat koordinaat: "x1,y1,x2,y2"
  • Poligon: Koordinat tak terhad (gandaan dua): "x1,y1,x2,y2, [...] xn,yn"
  • Bulatan: Sepasang koordinat dengan satu nilai jejari: "x1,y1,jejari"

Contoh ini menetapkan satu kawasan segi empat ("9,372,66,397"), dan jika diklik, pengguna akan dibawa ke laman utama Wikipedia.

<img src="image.png" alt="Website map" usemap="#mapname" /><map name="mapname">  <area shape="rect" coords="9,372,66,397" href="https://ms.wikipedia.org/" alt="Wikipedia" title="Wikipedia" /></map>

CSS

Pendekatan yang lebih moden ialah menindih pautan pada imej menggunakan kedudukan mutlak CSS; walau bagaimanapun, ini hanya menyokong kawasan segi empat. Teknik CSS ini mungkin sesuai untuk membuat peta imej berfungsi dengan betul pada iPhones, yang mungkin tidak dapat menskala semula peta imej HTML tulen dengan betul.